<template>
	<div class="placeholder flexv">
		<pub-head title="确认订单"></pub-head>
		<!-- 收货地址 -->
		<div class="to-add flex ali-c jus-c" @click="toAddress" v-if="list.length==0">
			<div class="flex ali-c">
				<van-icon name="add-o" class="to-add-icon" /><span>添加收货地址</span>
			</div>
		</div>
		<div class="to-add" @click="toAddress" v-else>
			<div class="flex jus-b ali-c">
				<div>
					<div class="to-add-top">
						<span>{{list.name}}</span>
						<span>{{list.phone}}</span>
					</div>
					<div class="to-add-bottom">
						<span>
							{{list.site}}
						</span>
					</div>
				</div>
				<div>
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<div class="commod-list mt2">
			<div class="commod-list-t flex ali-c">
				<van-icon name="orders-o" class="img" /><span>商品清单</span>
			</div>
			<div class="commod-list-c flex jus-b">
				<div class="list-c-img">
					<img :src="goodInfo.goods_img" />
				</div>
				<div class="list-c-text flexv jus-b">
					<div class="list-c-title">
						<span>
							{{goodInfo.goods_name}}
						</span>
					</div>
					<div class="list-c-body">
						<span>
							{{goodInfo.goods_type}}
						</span>
					</div>
					<div class="list-c-footer flex jus-b">
						<span class="red">
							¥{{goodInfo.goods_price}}
						</span>
						<span style="font-size: 0.32rem;">
							X{{goodInfo.goods_num}}
						</span>
					</div>
				</div>
			</div>
			<!-- 买家留言 -->
			<div class="content flex mt2">
				<span>买家留言</span>
				<input type="text" class="flex1" placeholder="填写内容需要与商家协商并确认" maxlength="25" v-model="content">
			</div>
		</div>
		<!-- 商品金额和配送费用 -->
		<div class="price-fill">
			<div class="flex jus-b price-name">
				<span class="name">商品金额</span>
				<span class="red">￥{{allPrice.toFixed(2)}}</span>
			</div>
			<div class="flex jus-b price-name">
				<span class="name">配送费用</span>
				<span class="red">包邮</span>
			</div>
		</div>

		<!-- 底部栏 -->
		<div class="placeholder-space mt2"></div>
		<div class="order-foot flex">
			<div class="flex order-foot-left flex1">
				<span class="text">共{{goodInfo.goods_num}}件，</span>
				<span class="red">合计：</span>
				<span class="red">￥{{allPrice.toFixed(2)}}</span>
			</div>
			<div class="sub-order flexc white click" @click="toSuccess">提交订单</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Icon
	} from 'vant';

	Vue.use(Icon);
	import {
		ReciveAddress,
		ProductOrder
	} from '@/request/api';
	import pubHead from '@/components/head';
	export default {
		components: {
			pubHead,
		},
		computed:{
			allPrice(){
				return this.goodInfo.goods_num*this.goodInfo.goods_price
			}
		},
		data() {
			return {
				address: '', // 收货地址
				text: '',
				content: '',
				hasAddress: true,
				isEmpty: false,
				list: [],
				goodInfo:{},
				address_id:''
				
			}
		},
		created() {
			// var list = decodeURIComponent(this.$route.params.obj);
			// console.log(list)
			this.goodInfo = this.$route.query
			this.getDatas()
		},
		methods: {
			getDatas() {
				// 获取收货地址
				ReciveAddress({
					token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
					page: 1, //当前页		
					pagesize: 10, //每页多少条数据
				}).then(res => {
					if (res.code == 1) {
						if(res.data.list.length>0)
						{
							this.list = res.data.list[0];
							this.address_id = res.data.list[0].address_id
						}
						this.isEmpty = this.list.length == 0;
						
					} else {
						this.$tip(res.msg)
					}
				})

			},
			toAddress() {
				this.$router.push('/address')
			},
			toSuccess(){
				if(this.address_id==''){
					this.$tip('请选择收货地址！')
					return
				}
				// this.$router.push('/payResult?type=2')
				ProductOrder({
					token:localStorage.getItem('token') ? localStorage.getItem('token') : '',
					status:2,
					totalprice:this.allPrice,
					num:this.goodInfo.goods_num,
					type:1,//1）正常商品 2）限时抢购 4)2人团购-团购 5）团购单独购买 6套餐下单
					remark:this.content,
					goods_id:this.goodInfo.goods_id,
					address_id:this.address_id,
					goods_spec_id:this.goodInfo.option_id,
					is_status:1
				}).then(res=>{
					if(res.code==1){
						this.$tip(res.msg)
						let that = this
						
						setTimeout(() =>{
						  let data = {
						      order_no: res.data.order_no,
						      pay_money: that.allPrice
						  }
						  that.$router.replace('/orderPay?info='+JSON.stringify(data))
						},1200)
						
					}
					else{
						this.$tip(res.msg)
					}
				})
			}
			
		}


	}
</script>
<style lang="less">
	.placeholder {
		min-height: 100vh;
		background-color: #f0f0f0;

		.to-add {
			max-width: 750px;
			height: 1.2rem;
			background-color: #FFFFFF;
			padding: 0.1rem 0.2rem;

			.to-add-user {
				display: flex;
				justify-content: space-between !important;
			}

			.to-add-icon {
				width: 0.36rem;
				height: 0.36rem;
				color: #50AD22;
				font-size: 0.38rem;
				margin-right: 0.1rem;
			}

			span {
				color: #999999;
				font-size: 0.32rem;
			}

			.to-add-top {
				span {
					color: #333333;
					font-size: 0.32rem;
					margin-right: 0.1rem;
				}
			}

			.to-add-bottom {
				margin-top: 0.1rem;

				span {
					color: #666666;
					font-size: 0.24rem;
				}
			}
		}

		.commod-list {
			background-color: #FFFFFF;
			padding: 0.2rem;

			.commod-list-t {

				.img {
					font-size: .32rem;
					margin-right: 0.10rem;
				}

				span {
					color: #333;
					font-size: 0.28rem;
					font-weight: bold;
				}
			}

			.commod-list-c {
				padding: .2rem 0;

				.list-c-img {
					width: 1.8rem;
					height: 1.8rem;
					margin-right: .2rem;

					img {
						width: 100%;
						height: 100%;
						border-radius: 0.1rem;
					}
				}

				.list-c-text {
					flex: 1;

					.list-c-title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;

						span {
							color: #333;
							font-size: 0.28rem;
						}
					}

					.list-c-body {
						font-size: 0.24rem;
						color: #999999;
					}

					.list-c-footer {
						.red {
							font-size: 0.28rem;
							color: red;
						}

					}
				}
			}

			// 买家留言
			.content {
				height: 0.84rem;
				font-size: 0.28rem;
				line-height: 0.84rem;
				color: #333;
				background-color: #fff;

				input {
					width: 4rem;
					height: 0.6rem;
					margin: auto 0 auto 0.3rem;
					line-height: 0.6rem;
				}
			}
		}

		.price-fill {
			margin-top: 0.2rem;
			background-color: #FFFFFF;
			padding: 0.2rem;

			.price-name {
				padding: .2rem 0;

				.name {
					color: #333333;
					font-size: 0.28rem;
				}

				.red {
					color: #EE1C1A;
					font-size: 0.24rem;
				}
			}
		}

		.placeholder-space {
			width: 100%;
			height: 0.98rem;
		}

		.order-foot {
			width: 100%;
			max-width: 750px;
			height: 0.98rem;
			margin: 0 auto;
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 0.3rem;
			line-height: 0.98rem;
			color: #333;
			background-color: #fff;

			.order-foot-left {
				padding: 0 0.2rem;
				border-top: 1px solid #dfe1e4;

				.text {
					color: #666;
					font-size: 0.24rem;
				}

				.red {
					color: #EE1C1A;
					font-size: 0.24rem;
				}
			}

			.sub-order {
				width: 2rem;
				background-color: #50AD22;
			}
		}
	}
</style>
